<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <template slot="footer">
      <a-button @click="handleCancel">取消</a-button>
      <!-- <a-button @click="handleOk(1)">保存</a-button> -->
      <a-button type="primary" @click="handleOk(2)">
        提交
      </a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">      
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="展会主题">
          <a-input placeholder="请输入主办主题" :disabled="editIdo" v-decorator="['theme', validatorRules.theme ]" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="举办地址">
          <a-input placeholder="请输入举办地址" :disabled="editIdo" v-decorator="['address', validatorRules.address ]" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="展会简介">
          <a-input placeholder="请输入展会简介" v-decorator="['brief', {}]" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="展位数">
          <a-input-number :min="1" style="width:100%;" :disabled="editIdo" placeholder="请输入展位数" v-decorator="['boothNum', validatorRules.boothNum ]" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="主票数">
          <a-input-number :min="1" :max="1000" style="width:100%;" :disabled="editIdo" placeholder="请输入行数" v-decorator="['mainTicketNumber', validatorRules.mainTicketNumber ]" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="次票数">
          <a-input-number :min="1" :max="1000" style="width:100%;" :disabled="editIdo" placeholder="请输入行数" v-decorator="['attchedTicketNumber', validatorRules.attchedTicketNumber ]" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="场地类型">
          <span class="startSty" style="left: -16%;">*</span>
          <a-select v-model="exhibitionTypeId" :disabled="editIdo">
            <a-select-option value="">请选择</a-select-option>
            <a-select-option v-for="(item, index) in typeHours" :key="index" :value="item.id">
              <span style="display: inline-block;width: 100%">
                {{ item.name }}
              </span>
            </a-select-option>
          </a-select>
        </a-form-item>
        <!-- <a-form-item v-if="exhibitionTypeId == 0"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="酒店层数">
          <span class="startSty" style="left: -16%;">*</span>
          <a-input-number :min="1" :max="50" :disabled="editIdo" style="width:100%;" placeholder="请输入层数" @change="lineFor" v-model="lineNumber" />
        </a-form-item> -->
        <a-form-item v-if="exhibitionTypeId == 0"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="酒店房间号">
          <span class="startSty" style="left: -93px;top: 4px;">*</span>
          <!-- <ul style="list-style: none;margin:0;padding:0;">
            <li v-for="item in lineNumberArr"> 
              <a-input style="width:100%;" :disabled="editIdo" :ref="'lineNUm'+item" placeholder="请输入房间号，用斜杠隔开例如101/102" />
            </li>
          </ul> -->
          <template v-for="(tag, index) in tags">
            <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
              <a-tag :key="tag" :closable="index !== 0" :afterClose="() => handleClose(tag)">
                {{`${tag.slice(0, 20)}...`}}
              </a-tag>
            </a-tooltip>
            <a-tag v-else :key="tag" :closable="!editIdo" :afterClose="() => handleClose(tag)">
              {{tag}}
            </a-tag>
          </template>
          <a-input
            v-if="inputVisible && showTagLen"
            ref="input"
            type="text"
            :disabled="editIdo"
            size="small"
            :style="{ width: '78px' }"
            v-model="inputValue"
            @change="handleInputChange"
            @blur="handleInputConfirm"
            @keyup.enter="handleInputConfirm"
          />
          <a-tag v-if="!inputVisible && showTagLen" @click="showInput" style="background: #fff; borderStyle: dashed;">
            <a-icon type="plus" /> New Tag
          </a-tag>
        </a-form-item>
        <!-- <a-form-item v-if="exhibitionTypeId == 0 && editIdo"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="酒店房间号">
          <span class="startSty" style="left: -93px;top: 13px;">*</span>
          <ul style="list-style: none;margin:0;padding:0;">
            <li v-for="(item,index) in lineNumberArr"> 
              <a-input style="width:100%;" :disabled="editIdo" :ref="'lineNUm'+index" :value="item" placeholder="请输入房间号，用斜杠隔开例如101/102" />
            </li>
          </ul>
        </a-form-item> -->
        <a-form-item v-show="exhibitionTypeId == 1"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="场地编排列">
          <a-input-number :min="1" :max="50" style="width:100%;" :disabled="editIdo" placeholder="请输入列数" v-decorator="['columnNumber', validatorRules.columnNumber ]" />
        </a-form-item>
        <a-form-item v-show="exhibitionTypeId == 1"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="场地编排行">
          <a-input-number :min="1" :max="50" style="width:100%;" :disabled="editIdo" placeholder="请输入行数" v-decorator="['lineNumber', validatorRules.lineNumber ]" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="展会管理员">          
          <span class="startSty">*</span>
          <a-select v-model="adminId" :disabled="editIdo">
            <a-select-option value="">请选择</a-select-option>
            <a-select-option v-for="(item, index) in adminList" :key="index" :value="item.phone">
              <span style="display: inline-block;width: 100%">
                {{ item.userName+'/'+item.phone }}
              </span>
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="开始时间">
          <a-date-picker showTime format='YYYY-MM-DD HH:mm:ss' v-decorator="[ 'startTime', validatorRules.startTime ]" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="结束时间">
          <a-date-picker showTime format='YYYY-MM-DD HH:mm:ss' v-decorator="[ 'endTime', validatorRules.endTime]" />
        </a-form-item>	
        <a-form-item label="发行方审核" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-dict-select-tag type="radio" :disabled="editIdo" v-decorator="['isAudit', validatorRules.isAudit]" :trigger-change="true" dictCode="play_reality"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="备注">
          <a-input placeholder="请输入备注" v-decorator="['remark', validatorRules.remark ]" />
        </a-form-item>	
        <a-form-item label="海报" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-upload v-decorator="['poster1', validatorRules.poster1 ]" :trigger-change="true"></j-upload>
        </a-form-item>
        <a-form-item label="场地使用许可" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-upload v-decorator="['licenseFile']" :trigger-change="true"></j-upload>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  import { httpAction,getAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import moment from "moment"
  import JUpload from '@/components/jeecg/JUpload'

  export default {
    name: "Exhibition_meeting_infoModal",
    components: { 
      JUpload,
    },
    data () {
      return {
        inputValue: '',
        tags: [],
        inputVisible: false,
        showTagLen: true,
        adminList:[],
        adminId:"",
        exhibitionTypeId:0,
        lineNumber:"",
        lineNumberArr:[],
        typeHours:[
          {name:'酒店',id:0},
          {name:'大厅',id:1}
        ],
        title:"操作",
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },

        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules:{
        address:{rules: [{ required: true, message: '请输入举办地址!' }]},
        theme:{rules: [{ required: true, message: '请输入主办主题!' }]},
        boothNum:{rules: [{ required: true, message: '请输入展位数!' }]},
        mainTicketNumber:{rules: [{ required: true, message: '请输入主票数!' }]},
        attchedTicketNumber:{rules: [{ required: true, message: '请输入次票数!' }]},
        remark:{rules: [{ required: true, message: '请输入备注!' }]},
        startTime:{rules: [{ required: true, message: '请输入开始时间!' }]},
        endTime:{rules: [{ required: true, message: '请输入结束时间!' }]},
        poster1:{rules: [{ required: true, message: '请上传展会海报!' }]},
        // columnNumber:{rules: [{ required: true, message: '请输入场地编排列!' }]},
        // lineNumber:{rules: [{ required: true, message: '请输入场地编排行!' }]},
        isAudit:{rules: [{ required: true, message: '请选择审核状态!' }]},
        },
        url: {
          addsubmit: "/exhibition/exhibition_meeting_info/addsubmit",
          add: "/exhibition/exhibition_meeting_info/add",
          edit: "/exhibition/exhibition_meeting_info/edit",
        },
        editIdo:false
      }
    },
    watch:{
      tags(val){
        if(typeof val == 'object'){
          this.showTagLen = true;
        }else{
          this.tags.push(val);
        }
      }
    },
    mounted(){      
      getAction("/exhibition/exhibition_sponsor_info/list")
        .then(res => {
          if (res.success) {            
            var list = {
              sponsorId: res.result.records[0].id,
              column: 'createTime',
              order: 'desc',
              field: 'id,,,userName,createTime,phone,action',
              pageNo: 1,
              pageSize: 100
            };
            getAction("/exhibition/exhibition_meeting_admin/list",list)
              .then(res => {
                if (res.success) {
                  this.adminList = res.result.records;
                } else {
                  this.$message.warning(res.message)
                }
              })
          } else {
            this.$message.warning(res.message)
          }
        })
    },
    methods: {
      handleClose(removedTag) {
        const tags = this.tags.filter(tag => tag !== removedTag);
        this.tags = tags;
      },
      showInput() {
        this.inputVisible = true;
        this.$nextTick(function() {
          this.$refs.input.focus();
        });
      },

      handleInputChange(e) {
        if(!testRule(e.target.value)){
          that.$message.warning("不能包含空格！");
          return
        }
        this.inputValue = e.target.value;
      },
      handleInputConfirm() {
        const inputValue = this.inputValue;
        let tags = this.tags;
        if (inputValue && tags.indexOf(inputValue) === -1) {
          tags = [...tags, inputValue];
        }
        Object.assign(this, {
          tags,
          inputVisible: false,
          inputValue: '',
        });
      },
      lineFor(){
        this.lineNumberArr=[];
        for(var i=0;i<this.lineNumber;i++){
          this.lineNumberArr.push(i);
        }
        this.$forceUpdate();
      },
      add () {
        this.edit({});
      },
      edit (record) {
        this.editIdo = false;
        if(record.address){
          this.editIdo = true;
          this.exhibitionTypeId = record.locationType;
          this.adminId = record.meetingAdminPhone;
          if(record.locationType == 0){
            // this.lineNumber = record.floorNumber;
            this.tags = record.hotelNumber.split(','); 
          }
          record.isAudit = record.isAudit.toString();
        }else{
          this.tags = [];
          this.adminId = "";
        }
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'address','theme','boothNum','mainTicketNumber','attchedTicketNumber','remark','isAudit','poster1','columnNumber','licenseFile','lineNumber','brief','status','statusMsg','ticketsStatus'))
		  //时间格式化
          this.form.setFieldsValue({startTime:this.model.startTime?moment(this.model.startTime):null})
          this.form.setFieldsValue({endTime:this.model.endTime?moment(this.model.endTime):null})
          this.form.setFieldsValue({entranceDate:this.model.entranceDate?moment(this.model.entranceDate):null})
        });

      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      checkName(val){       
        var regEn = /[`~!@#$%^&*()_+<>?:"{},.\;'[\]]/im,
            regCn = /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im;      
        if(regEn.test(val) || regCn.test(val)) {
            return false;
        }else{
          return true
        }
      },
      handleOk (num) {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            if(that.exhibitionTypeId == 0){
              // var listArr=[];
              // for(let i=0;i<that.lineNumber;i++){
              //   listArr.push(that.$refs['lineNUm'+i][0].stateValue)
              // }
              // for(let i=0;i<listArr.length;i++){                
              //   if(!this.checkName(listArr[i])){
              //     this.$message.warning("格式错误！请输入正确格式101/102!")
              //     return
              //   }
              // }
              values.hotelNumber = this.tags.toString();
              // values.floorNumber = that.lineNumber;
            }else{
              if(!values.columnNumber){
                that.$message.warning('请输入场地编排列!')
                return
              }
              if(!values.lineNumber){
                that.$message.warning('请输入场地编排行!')
                return
              }
            }
            if(!that.adminId){
              that.$message.warning('请选择展会管理员！')
              return
            }
            values.meetingAdminPhone = that.adminId;
            that.confirmLoading = true;
            values.locationType = that.exhibitionTypeId;
            if(!that.adminId){
              this.$message.warning('请选择展会管理员！')
              return
            }
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              if(num == 1){
                httpurl+=this.url.add;
              }else{
                httpurl+=this.url.addsubmit;
              }
              method = 'post';
            }else{
              httpurl+=this.url.edit;
              method = 'put';
              // if(num == 1){
              // }else{
              //   httpurl+=this.url.addsubmit;
              //   method = 'post';
              // }
            }
            let formData = Object.assign(this.model, values);
            //时间格式化
            formData.startTime = formData.startTime?formData.startTime.format('YYYY-MM-DD HH:mm:ss'):null;
            formData.endTime = formData.endTime?formData.endTime.format('YYYY-MM-DD HH:mm:ss'):null;
            httpAction(httpurl,formData,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
              that.confirmLoading = false;
              that.close();
            })
          }
        })
      },
      handleCancel () {
        this.close()
      },


    }
  }
</script>

<style lang="less" scoped>
  .startSty{
    display: inline-block;
    margin-right: 4px;
    color: #f5222d;
    font-size: 14px;
    font-family: SimSun, sans-serif;
    line-height: 1;
    position: absolute;
    left: -19%;
    top: 3px;
  }
</style>